export default {
    props: {
        backgroundUrl: String,
        zIndex: {type: Number, default: 1},
        width: {type: Number, default: -1},
        height: {type: Number, default: -1},
        widthInParent: {type: Number, default: -1},
        heightInParent: {type: Number, default: -1},
        left: {type: String, default: ""},
        right: {type: String, default: ""},
        top: {type: String, default: ""},
        bottom: {type: String, default: ""},
    },
    emits: ['onClick'],
    setup(props, ctx) {
        const button = Vue.ref(null);
        const size = Vue.computed(() => {
            return getSize();
        });

        function getSize() {
            if (props.width !== -1) {
                // noinspection JSSuspiciousNameCombination
                return {width: props.width + "px", height: props.width + "px"};
            } else if (props.height !== -1) {
                // noinspection JSSuspiciousNameCombination
                return {width: props.height + "px", height: props.height + "px"};
            } else if (props.widthInParent !== -1 && props.heightInParent === -1) {
                return {width: props.widthInParent + "%"};
            } else if (props.heightInParent !== -1 && props.widthInParent === -1) {
                return {height: props.heightInParent + "%"};
            }
        }

        const position = Vue.computed(() => {
            return getPosition();
        });

        function getPosition() {
            const result = {};
            if (props.left !== "") {
                result.left = props.left;
            } else if (props.right !== "") {
                result.right = props.right;
            }
            if (props.top !== "") {
                result.top = props.top;
            } else if (props.bottom !== "") {
                result.bottom = props.bottom;
            }
            return result;
        }

        Vue.onMounted(() => {
            Vue.nextTick(() => {// console.log(button.value);
                if (props.widthInParent !== -1) {
                    const nowWidth = button.value.clientWidth;
                    // console.log(nowWidth);
                    button.value.style.height = nowWidth + "px";
                } else if (props.heightInParent !== -1) {
                    const nowHeight = button.value.clientHeight;
                    // console.log(nowHeight);
                    button.value.style.width = nowHeight + "px";
                }
            }).then();
        })

        return {button, size, position};
    },
    template: `<div style="position: fixed;
                cursor: pointer;"
                :style="[
                {
                    background: 'url(&quot;'+backgroundUrl+'&quot;)',
                    'background-size':'100% 100%',
                    'z-index':zIndex,
                 }, 
                 size,
                 position
                 ]"
                 ref="button"
                 @click="$emit('onClick')"
                ></div>`,
}